<template>
  <view class="feature-detail-container">
    <!-- 顶部文字区域 -->
    <view class="header-section">
      <view class="title-box">
        <text class="main-title">{{ featureData.title }}</text>
      </view>
      <view class="icon-box">
        <text :class="['feature-icon', 'bi', featureData.icon]"></text>
      </view>
      <view class="desc-box">
        <text class="description">{{ featureData.fullDescription || featureData.description }}</text>
      </view>
    </view>

    <!-- 详细内容区域 -->
    <view class="content-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        <text>历史沿革</text>
      </view>
      
      <view class="content-box">
        <view class="text-box">
          <text class="content-text">{{ detailContent.history || "该应用的历史可以追溯到中国古代..." }}</text>
        </view>
      </view>
    </view>

    <!-- 应用原理 -->
    <view class="content-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        <text>应用原理</text>
      </view>
      
      <view class="content-box">
        <view class="image-box" v-if="detailContent.image">
          <image
            :src="detailContent.image"
            mode="aspectFit"
            class="main-image"
          />
        </view>
        <view class="text-box">
          <text class="content-text">{{ detailContent.principle || "该应用基于重要的物理原理..." }}</text>
        </view>
      </view>
    </view>

    <!-- 现代启示 -->
    <view class="content-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        <text>现代启示</text>
      </view>
      
      <view class="content-box">
        <view class="text-box">
          <text class="content-text">{{ detailContent.modern || "古代智慧对现代科技发展的启示..." }}</text>
        </view>
      </view>
    </view>

    <!-- 返回按钮 -->
    <view class="action-bar">
      <button class="back-button" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const url = $url;
const featureData = ref({
  title: "",
  icon: "",
  description: "",
  fullDescription: ""
});

const detailContent = ref({
  history: "",
  principle: "",
  modern: "",
  image: ""
});

// 物理应用的详细内容数据
const featureDetails = {
  // 声学应用
  "乐器应用": {
    history: "中国古代乐器的发展可追溯到新石器时代。商周时期，青铜编钟已达到高度成熟的音律体系。古人通过长期实践，掌握了音高与物体尺寸、材质的关系，创造出音色优美的编钟、排箫等乐器。",
    principle: "古代乐器制作应用了多种声学原理。例如，编钟利用金属材质的振动特性产生持久的共鸣；排箫则利用不同长度的竹管产生不同音高，体现了管长与音高的反比关系。",
    modern: "古代乐器制作技艺对现代声学研究有重要启示。现代乐器设计、音乐厅声学设计等领域，都能从中国古代声学智慧中汲取灵感。",
    image: "https://epoch.jxksd.top/mo/images/physics/acoustics_1.png"
  },
  "建筑声学": {
    history: "中国古代建筑声学的应用最早见于先秦时期的宫殿设计。到唐宋时期，戏台、钟楼等建筑的声学设计已相当成熟，能有效传递声音或创造特定声学效果。",
    principle: "古代建筑声学主要利用反射、散射等声波传播特性。例如，古代戏台常采用特定的弧形顶部设计，使演员的声音能够均匀地传递到观众席；钟楼的设计则考虑了声波的扩散方向。",
    modern: "中国古代建筑声学为现代建筑声学设计提供了宝贵参考。现代剧院、音乐厅的设计仍在借鉴这些古老智慧。",
    image: "https://epoch.jxksd.top/mo/images/physics/acoustics_2.png"
  },
  // 其他声学应用...

  // 力学应用
  "水利工程": {
    history: "中国古代水利工程最早可追溯到夏禹治水。秦汉时期，都江堰、灵渠等水利工程已展现出高超的力学应用智慧。宋元时期，水利工程技术进一步发展。",
    principle: "古代水利工程应用了流体力学原理。都江堰的鱼嘴分水堤巧妙利用水流动力学特性分流；水轮式灌溉装置则利用水的势能转化为机械能。",
    modern: "中国古代水利工程对现代水利工程设计有重要启示，尤其在生态友好型水利工程设计方面，古人的智慧仍有重要参考价值。",
    image: "https://epoch.jxksd.top/mo/images/physics/mechanics_1.png"
  },
  // 其他应用详情可以继续添加...
};

function goBack() {
  uni.navigateBack();
}

onMounted(() => {
  // 获取路由参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const type = currentPage.$page?.options?.type || "";
  const feature = currentPage.$page?.options?.feature || "{}";
  
  try {
    // 解析传递过来的feature数据
    const parsedFeature = JSON.parse(decodeURIComponent(feature));
    featureData.value = parsedFeature;
    
    // 获取该feature对应的详细内容
    if (featureDetails[parsedFeature.title]) {
      detailContent.value = featureDetails[parsedFeature.title];
    } else {
      // 如果没有具体内容，可以根据物理类型和标题生成一些基本内容
      detailContent.value = {
        history: `${parsedFeature.title}在中国古代有着悠久的历史，展现了先人对物理规律的深刻理解。`,
        principle: `${parsedFeature.title}主要基于物理学中的重要原理，通过巧妙的设计实现了特定功能。`,
        modern: `古代${parsedFeature.title}的智慧对现代科技发展仍有启示意义，值得我们深入研究和传承。`
      };
    }
  } catch (e) {
    console.error("解析参数错误", e);
  }
});
</script>

<style lang="scss" scoped>
.feature-detail-container {
  min-height: 100vh;
  background: url(https://epoch.jxksd.top/mo/images/dbg.png) no-repeat top center/cover;
  padding: 30rpx;
}

.header-section {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
  text-align: center;
}

.title-box {
  margin-bottom: 20rpx;
}

.main-title {
  font-size: 40rpx;
  font-weight: bold;
  color: var(--td-brand-color);
  display: inline-block;
}

.icon-box {
  margin: 20rpx 0;
}

.feature-icon {
  font-size: 80rpx;
  color: var(--td-brand-color);
}

.desc-box {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1px solid #ddd;
}

.description {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  display: block;
}

.content-section {
  margin-bottom: 40rpx;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
  padding: 30rpx;
}



.title-icon {
  color: var(--td-brand-color);
  margin-right: 10rpx;
}

.content-box {
  display: flex;
  gap: 30rpx;
  align-items: flex-start;
  flex-wrap: wrap;
}

.image-box {
  flex-shrink: 0;
  width: 280rpx;
}

.main-image {
  width: 280rpx;
  height: 280rpx;
  object-fit: contain;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10rpx;
  border-radius: 8rpx;
}

.text-box {
  flex: 1;
  min-width: 60%;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1px solid #ddd;
  padding: 20rpx;
}

.content-text {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  display: block;
}

.action-bar {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.back-button {
  background-color: var(--td-brand-color);
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 40rpx;
  border-radius: 30rpx;
  border: none;
}
</style> 